<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>AUI-靠谱的移动前端框架</title>
	<meta name="keywords" content="aui,前端框架,ui框架,框架,跨平台" />
	<meta name="description" content="AUI2.0的重新架构充分站在项目开发的角度上，以解决布局样式为重点，组件模块化为辅助进行全面优化调整，可以说2.0版本的AUI更合适项目的开发。我们从细节入手，让AUI做出来的APP达到像素及应用的标准，遵循Google Material设计规范，让行里行间的代码发挥她的极致效果。" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="../../plugins/website_01/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
	<link rel="stylesheet" href="../../plugins/website_01/css/style.css" type="text/css" rel="stylesheet" media="all">
	<link rel="stylesheet" href="../../plugins/website_01/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../../plugins/website_01/css/flexslider.css" type="text/css" media="screen" />
</head>
<body>
<!-- banner -->
<div class="banner-w3layouts">
	<div class="flexslider">
		<ul class="slides">
			<li>
				<div class="banner-img1">
				</div>
			</li>
			<li>
				<div class="banner-img2">
				</div>
			</li>
		</ul>
	</div>
	<!-- banner-info -->
	<div class="banner-agileinfo">
		<div class="container">
			<div class="w3header">
				<nav class="navbar navbar-default">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<h1>
							<a href="/" class="logo"><img src="../../plugins/website_01/img/logo.png" alt="AUI"></a>
						</h1>
					</div>
					<!-- navbar-header -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="/" class="active">首页</a>
							</li>
							<li>
								<a href="/made">定制服务</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">文档 <span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li>
										<a href="/doc/v/2" target="_blank">2.x文档</a>
									</li>
									<li>
										<a href="/doc/v/1" target="_blank">1.x文档</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="/club" target="_blank">社区</a>
							</li>
							<li>
								<a href="https://github.com/liulangnan/aui" target="_blank">github</a>
							</li>
						</ul>
						<div class="clearfix"> </div>
					</div>
				</nav>
			</div>
			<div class="banner-w3text">
				<h4>为您提供基于AUI的H5定制服务</h4>
				<h2>模板定制服务 重磅上线</h2>
				<h5>轻量级前端框架 更专注更快捷</h5>
				<a href="/made" class="w3btn"><span>定制模板</span></a>
				<a href="http://www.auicss.com/download/aui-20170109-v2.1.zip" class="w3btn2"><span>下载AUI 2.1</span></a>
			</div>
		</div>
		<!-- //banner-info -->
	</div>
</div>
<!-- //banner -->
<!-- welcome -->
<div class="welcome">
	<div class="container">
		<div class="agileits-title">
			<h3>AUI Mobile</h3>
			<p>结合实际项目出发，站在开发者和项目的角度，重新定义AUI框架</p>
		</div>
		<div class="welcome-agileinfo">
			<div class="col-md-4 col-xs-6 welcome-grid agileits-w3layouts">
				<div class="col-xs-2 welcome-grid-left">
					<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
				</div>
				<div class="col-xs-10 welcome-grid-right">
					<h4>组件丰富 模块化</h4>
					<p>使用容器+布局+模块的架构方式，JS组件辅助，更自由灵活，更易扩展使用；flex弹性布局更灵活。</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-4 col-xs-6 welcome-grid agileits-w3layouts">
				<div class="col-xs-2 welcome-grid-left">
					<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
				</div>
				<div class="col-xs-10 welcome-grid-right">
					<h4>原生体验</h4>
					<p>遵循Google Material设计规范，标准严谨的语法，更细致的处理，让APICloud开发像素级应用，完美适配各个机型。</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-4 col-xs-6 welcome-grid agileits-w3layouts">
				<div class="col-xs-2 welcome-grid-left">
					<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
				</div>
				<div class="col-xs-10 welcome-grid-right">
					<h4>轻量级 高性能</h4>
					<p>几十K的核心CSS文件，移动设备优先，面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备。</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-4 col-xs-6 welcome-grid welcome-grid-bottom">
				<div class="col-xs-2 welcome-grid-left">
					<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
				</div>
				<div class="col-xs-10 welcome-grid-right">
					<h4>MIT License</h4>
					<p>AUI使用MIT协议，用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售 AUI 及其副本。</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-4 col-xs-6 welcome-grid welcome-grid-bottom">
				<div class="col-xs-2 welcome-grid-left">
					<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
				</div>
				<div class="col-xs-10 welcome-grid-right">
					<h4>开源模板示例</h4>
					<p>丰富的多行业模板示例</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-4 col-xs-6 welcome-grid welcome-grid-bottom">
				<div class="col-xs-2 welcome-grid-left">
					<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
				</div>
				<div class="col-xs-10 welcome-grid-right">
					<h4>定制服务</h4>
					<p>为客户提供更方便快捷的AUI模板定制服务</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //welcome -->
<!-- about-slid -->
<div class="w3about-slid agileits-w3layouts">
	<div class="container">
		<div class="about-slid-info">
			<h4>AUI 2.0 适合项目开发的前端框架</h4>
			<p>AUI 2.0是一套全新的AUI框架，在1.X基础上进行了重新架构。结合实际项目出发，站在开发者和项目的角度，重新定义AUI框架。在2.0中使用了大量弹性响应式布局，采用容器+布局结构+控件的嵌套形式，方便开发者快速布局样式。</p>
		</div>
	</div>
</div>
<!-- //about-slid -->
<!-- skills -->
<div class="skills w3-agileits">
	<div class="container">
		<h3 class="text-center title">我们的服务</h3>
		<div class="skills-agileinfo">
			<div class="col-md-6 skills-w3left">
				<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
					<ul id="myTab" class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active">
							<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">免费开源</a>
						</li>
						<li role="presentation">
							<a href="#carl" role="tab" id="carl-tab" data-toggle="tab" aria-controls="carl">定制服务</a>
						</li>
						<li role="presentation">
							<a href="#james" role="tab" id="james-tab" data-toggle="tab" aria-controls="james">模板商城</a>
						</li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
							<div class="tabcontent-grids">
								<p>AUI使用MIT开源协议发布，永久免费。会不定时更新版本及发布模板示例。致力于为开发者提供更好的框架。</p>
								<p>目前AUI已更新到2.X版本，已经有超过3万名开发者使用，获得了大家的一致认可。我们会继续努力</p>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="carl" aria-labelledby="carl-tab">
							<div class="tabcontent-grids">
								<p>为了更好的满足开发者及客户需求，AUI开发团队提供了额外的模板及AUI皮肤定制服务。1对1的项目需求沟通，根据原型或者UI设计定制移动端页面开发。</p>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="james" aria-labelledby="james-tab">
							<div class="tabcontent-grids">
								<p>AUI模板商城即将上线，届时将为大家提供更优质的前端模板。同时AUI的开发者可以上传分享或销售自己的AUI作品。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 skills-w3right bar_group">
				<div class='bar_group__bar thin' label='开发效率提高 &nbsp;&nbsp; 70%' value='70' max="100"></div>
				<div class='bar_group__bar thin' label='开发成本节约 &nbsp;&nbsp; 50%' value='50' max="100"></div>
				<div class='bar_group__bar thin' label='用户体验提高 &nbsp;&nbsp; 60%' value='60' max="100"></div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //skills -->
<!-- news -->
<div class="news-w3layouts">
	<div class="container">
		<div class="agileits-title">
			<h3>里程碑</h3>
			<p>一路上有你们 才是AUI发展的动力</p>
		</div>
		<div class="news-agileinfo w3-agileits">
			<div class="col-md-4 news-w3lgrids">
				<h4>首版本发布</h4>
				<p>15年09月15日，AUI发布了第一个版本，一上线就获得了开发者的好评，那段岁月里感谢AUI使用者提出的宝贵意见。</p>
			</div>
			<div class="col-md-4 news-w3lgrids">
				<h4>2.0版本发布</h4>
				<p>经过1.x版本的反复更新磨炼，在16年7月16日，同时团队结合实际项目开发对AUI进行了颠覆性的重构，让AUI发挥的更极致。2.0的发布被多家网站及媒体纷纷转载报道。</p>
			</div>
			<div class="col-md-4 news-w3lgrids">
				<h4>模板定制</h4>
				<p>为了更好的对开发者服务，快速完成项目的上线，AUI团队正式对外提供模板定制服务。</p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //news -->
<!-- subscribe -->
<div class="subscribe wthree-sub">
	<div class="container">
		<h3>订阅AUI最新动态</h3>
		<form action="#" method="post">
			<input type="email" name="email" placeholder="请输入邮箱..." required="">
			<input type="submit" value="提交">
			<div class="clearfix"> </div>
		</form>
	</div>
</div>
<!-- //subscribe -->
<div class="agile-footer">
	<div class="container">
		<div class="footer-agileinfo">
			<div class="col-md-4 col-sm-6 footer-wthree-grid">
				<h6><a href="/" class="logo"><img src="../../plugins/website_01/img/logo.png"></a></h6>
				<p></p>
			</div>
			<div class="col-md-4 col-sm-6 footer-wthree-grid">
				<h3>导航</h3>
				<ul>
					<li>
						<a href="javascript:void(0);">首页</a>
					</li>
					<li>
						<a href="javascript:void(0);">2.x文档</a>
					</li>
					<li>
						<a href="javascript:void(0);">2.x下载</a>
					</li>
				</ul>
			</div>
			<div class="col-md-4 col-sm-6 footer-wthree-grid w3social">
				<h3>联系我们</h3>
				<ul>
					<li>
						<a href="mailto:邮箱名称"><i class="fa fa-envelope-o"></i> 邮箱名称</a>
					</li>
					<li>
						<a href="tel:电话"><i class="fa fa-volume-control-phone"></i> 电话</a>
					</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<div class="copyw3-agile">
	<div class="container">
		<p>© 2015-2017 企业名称. All Rights Reserved |
			<a href="javascript:void(0);">企业名称</a>
		</p>
	</div>
</div>
<script type="text/javascript" src="../../plugins/website_01/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../../plugins/website_01/js/bootstrap.js"></script>
<script type="text/javascript" src="../../plugins/website_01/js/move-top.js"></script>
<script type="text/javascript" src="../../plugins/website_01/js/jquery.flexslider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".scroll").click(function(event) {
            event.preventDefault();
            $('html,body').animate({
                scrollTop: $(this.hash).offset().top
            }, 1000);
        });
        $('.flexslider').flexslider({
            animation: "slide",
            start: function(slider) {
                $('body').removeClass('loading');
            }
        });
        $().UItoTop({
            easingType: 'easeOutQuart'
        });
    });
</script>
</body>

</html>